<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="application/javascript">
        var header = "";

        function login() {
            $.post("http://localhost:8080/auth/login", {
                username: $("#username").val(),
                password: $("#password").val()
            }, function (data) {
                console.log(data);
                header = data;
            })
        }

        function toUserPageBtn() {
            $.ajax({
                type: "get",
                url: "http://localhost:8080/userpage",
                beforeSend: function (request) {
                    request.setRequestHeader("Authorization", header);
                },
                success: function (data) {
                    console.log(data);
                }
            });
        }
    </script>
</head>
<body>
<fieldset>
    <legend>Please Login</legend>
    <label>UserName</label><input type="text" id="username">
    <label>Password</label><input type="text" id="password">
    <input type="button" onclick="login()" value="Login">
</fieldset>
<button id="toUserPageBtn" onclick="toUserPageBtn()">访问UserPage</button>
</body>
</html>